<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 100%;
        }
        .box1{
            width: 100%;
            height: 50px;
            background: lavender;
        }
        .btn{
            background: orange;
            color: white;
            border: 0;
            width: 80px;
            height: 30px;
            border-radius: 5px;
        }
        .liang{
            background: crimson;
            color: white;
            border: 0;
            width: 100px;
            height: 30px;
            line-height: 30px;
            border-radius: 5px;
            margin: 10px;
        }
        .sou{
            width: 150px;
            height: 20px;
            border-radius: 3px;
            margin: 10px;
        }
        table{
            margin-top: 15px;
            width: 100%;
            border-collapse: collapse;
            text-align: center;
        }
        th{
            border: 1px solid silver;
        }
        th:active{color: red}
        th:hover{color: red}
        td{
            border: 1px solid silver;
        }
        .kuang{
            margin-left:30%;
            font-family: 宋体;
            font-size: 16px;
            font-weight:bold;
        }
        .lyy{
            width: 1000px;
            height: 30px;
            margin-top: 22%;
            margin-left: 48%;
        }
        .sb{
            border: 0;
            background: #2D93CA;
            margin-top: -3px;
            width: 70px;
            height: 30px;
            border-radius: 5px;
        }
        .zhuan1{
            width: 50px;
            height: 20px;
        }
        .zhuan2{
            border: solid;
            color: #2D93CA;
            font-weight: bold;
            font-size: 20px;
            background: transparent;

            border: 0;
        }
        .dao{
            font-family: 黑体;
            font-size: 17px;
        }
    </style>
    <script src="/resources/js/jquery-1.7.1.min.js" type="application/javascript"></script>
    <script src="/resources/js/jquery-ui-1.8.10.custom.min.js" type="text/css"></script>
</head>

<script>
    $(function () {
        $.getJSON("/selectCategory",{},function (data) {
            $("#leibie").empty();
            var leibie = '<option value="">全部</option>';
            for(var i = 0 ;i < data.length;i++){
                var lei = data[i];
                leibie +='<option value="'+lei.id+'">'+lei.category+'</option>'
            }
            $("#leibie").append(leibie);
        })
    })
    function jian() {
        var x = $("input[name='zhuan']").val();
        readList(x);
    }
</script>
<body>
<div class="box">
    <h3>药品品目查询</h3>
    <hr>
    <form action="" method="post" id="form1">
        <div class="kuang">
            药品品目号:
            <input type="text" placeholder="输入药品品目号" class="sou" name="serialNumber"/>
            &nbsp;
            通用名
            <input type="text" placeholder="输入通用名" class="sou" name="commonName"/>
            <br/>
            &nbsp;&nbsp;
            剂型：
            <input type="text" placeholder="输入剂型" class="sou" name="dosageForm"/>
            &nbsp;
            规格：
            <input type="text" placeholder="输入规格" class="sou" name="size"/>
            <br/>
            &nbsp;&nbsp;
            单位：
            <input type="text" placeholder="输入单位" class="sou" name="unit"/>
            转换系数:
            <input type="text" placeholder="输入转换系数" class="sou" name="factor"/>
            <br/>
            &nbsp;
            药品类别:
            <select type="text" class="sou" id="leibie" name="category">
                <option value="">全部</option>
            </select>
            &nbsp;
            状态：
            <select type="text"class="sou" id="zhuangtai">
                <option value="1">正常</option>
                <option value="2">无法交易</option>
            </select>
        </div>
    </form>
</div>
<div class="box1">
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <button class="liang" onclick="gxdaochu()">导出</button>&nbsp;&nbsp;<button class="liang" onclick="readList(1)">查询</button>
</div>
<table>
    <thead>
    <tr>
        <th>药品品目号</th>
        <th>通用名</th>
        <th>剂型</th>
        <th>规格</th>
        <th>单位</th>
        <th>转换系数</th>
        <th>生产企业</th>
        <th>商品名称</th>
        <th>中标价</th>
        <th>质量层次</th>
        <th>药品类别</th>
        <th>状态</th>
        <th>详细</th>
    </tr>
    </thead>
    <tbody id="table">

    </tbody>
</table>
<div class="lyy" style="margin: 10px">
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <button class="sb" onclick="readList(1)">首页</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <button class="sb" onclick="readList(da.prePage)">上一页</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <button class="sb" onclick="readList(da.nextPage)">下一页</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <button class="sb" onclick="readList(da.pages)">尾页</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <span class="dao">转到</span><input class="zhuan1" name="zhuan" type="text"><span class="dao">页</span><button class="zhuan2"><span class="jian" onclick="jian()">⇨</span></button>
</div>
</body>
</html>
